<template>
  <!-- 专利详情 -->
  <div>
    <div class="title_">
      <span>{{ basicData.t }}</span>
      <img
        v-if="basicData.t"
        @click="downloadPdf"
        class="psd-icon"
        src="@/assets/img/pdf.png"
        alt="pdf下载"
        ondragstart="return false"
      />
    </div>
    <!-- 基本信息 -->
    <el-row>
      <el-col :span="24">
        <h3 class="title">基本信息</h3>
        <p class="abstract">
          <i>摘要</i>
          <span>{{ basicData.abst || "暂无数据" }}</span>
        </p>
        <ul class="basic-info">
          <li>
            <span>申请号</span>
            <span>{{ basicData.ap }}</span>
            <span>申请日</span>
            <span>{{
              basicData.ad !== "" &&
              basicData.ad !== undefined &&
              basicData.ad !== null
                ? basicData.ad.substr(0, 4) +
                  "-" +
                  basicData.ad.substr(4, 2) +
                  "-" +
                  basicData.ad.substr(6, 2)
                : "-"
            }}</span>
            <span>主分类号</span>
            <span>{{ basicData.l && basicData.l.key }}</span>
          </li>
          <li>
            <span>公开/公告号</span>
            <span>{{ basicData.p }}</span>
            <span>公开/公告日</span>
            <span>{{
              basicData.isd !== "" &&
              basicData.isd !== undefined &&
              basicData.isd !== null
                ? basicData.isd.substr(0, 4) +
                  "-" +
                  basicData.isd.substr(4, 2) +
                  "-" +
                  basicData.isd.substr(6, 2)
                : "-"
            }}</span>
            <span>IPC</span>
            <span>{{ basicData.icls }}</span>
          </li>
          <li>
            <span>申请人</span>
            <span>{{ basicData.aList && basicData.aList.join(",") }}</span>
            <span>发明人</span>
            <span>{{ basicData.iList && basicData.iList.join(",") }}</span>
            <span>地址</span>
            <span>{{ address }}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <!-- 法律信息 -->
    <el-row>
      <el-col :span="24">
        <h3 class="title"><i></i>法律信息</h3>
        <el-table
          :data="legalData"
          style="width: 100%; margin-top: 20px; padding: 20px"
          :header-cell-style="patentHeaderStyle"
          :cell-style="patentCellStyle"
        >
          <el-table-column type="index" label="序号" width="100" align="center">
          </el-table-column>
          <el-table-column prop="PD" label="变更日期" width="180">
          </el-table-column>
          <el-table-column prop="Type" label="法律状态"> </el-table-column>
          <!-- prop="Content"  -->
          <!-- zjs/2020/03/10 -->
          <el-table-column label="详情">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" placement="left-end">
                <div
                  style="line-height: 20px"
                  slot="content"
                  v-html="content(scope.row.Content)"
                ></div>
                <p>{{ scope.row.Content | br }}</p>
              </el-tooltip>
            </template>
          </el-table-column>
          <template v-if="legalLoading === true" slot="empty">
            加载中...
          </template>
          <template v-if="legalLoading === 'no-data'" slot="empty">
            <div>暂无数据</div>
          </template>
        </el-table>
      </el-col>
    </el-row>
    <!-- 相关专利 -->
    <el-row>
      <el-col xs12>
        <h3 class="title"><i></i>相关专利</h3>
        <el-table
          :row-class-name="tableRowClassName"
          :data="relevantData"
          style="width: 100%; margin-top: 20px; padding: 20px"
          :header-cell-style="patentHeaderStyle"
          :cell-style="patentCellStyle"
        >
          <el-table-column type="index" width="100" align="center" label="序号">
          </el-table-column>
          <el-table-column prop="score" width="100" align="center" label="分数">
          </el-table-column>
          <el-table-column prop="r" width="160" align="center" label="相关度">
          </el-table-column>
          <el-table-column label="专利号">
            <template slot-scope="scope">
              <div>
                {{ scope.row.p || scope.row.pn }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="a" label="申请人"> </el-table-column>
          <el-table-column label="专利名称">
            <template slot-scope="scope">
              <div>
                {{ scope.row.t || scope.row.title }}
              </div>
            </template>
          </el-table-column>
          <template v-if="relevantLoading === true" slot="empty">
            加载中...
          </template>
          <template v-if="relevantLoading === 'no-data'" slot="empty">
            <div>暂无数据</div>
          </template>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      basicData: [],
      legalData: [],
      relevantData: [],
      patentHeaderStyle: function () {
        return "font-weight: 600; color: #241c75;";
      },
      patentCellStyle: function () {
        return "color: #7674a3";
      },
      pn: "",
      address: "",
      searchPn: this.$route.query.pn || "",
      // 法律信息加载中
      legalLoading: true,
      // 相关专利加载中
      relevantLoading: true,
    };
  },
  filters: {
    br(val) {
      if (val) {
        return val.replace(/<br>/g, " ");
      }
    },
  },
  mounted() {
    this.getBasicData();
    this.getAddress();
    this.getRelevantPatent();
  },
  methods: {
    content(val) {
      if (val) {
        let str = "";
        return (str = val.split("<br>").join("<br/>"));
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2) {
        return "warning-row";
      }
      return "";
    },
    getBasicData() {
      // 获取专利列表
      this.$post(this.$Url.patent.basicInfo, {
        sf: "QueryFulltext",
        istype: "1",
        ialist: "1",
        sx: "cn/queryfulltext_cn",
        iclient: "1",
        isClick: 1,
        foo: "SEARCH-MASTER",
        sl: "chs",
        itrans: "1",
        fooShowPN: "null",
        ispage: "100",
        advanceSearchHistory: "false",
        idi: "274766528119",
        // "sq": `apn/${this.$route.query.p} or pns/${this.$route.query.p}`,
        sq: `apn/${this.searchPn} or pns/${this.searchPn}`,
        ipi: this.currentPage,
        ips: this.pageSize,
        sqtype: "1",
        ishowAbst: 1,
      })
        .then((data) => {
          if (data.data.PatentList) {
            this.basicData = data.data.PatentList[0];
            this.pn = data.data.PatentList[0].PN;
          }
          this.getLegalInfo();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取地址
    getAddress() {
      this.$post(this.$Url.patent.address, {
        sqtype: "1",
        ishowAbst: 1,
        sf: "ShowPatent",
        sl: "chs",
        // spn: `${this.$route.query.p}`,
        spn: `${this.searchPn}`,
        sx: "showpatent_cn",
      })
        .then((data) => {
          if (data.data.Patent.Header) {
            this.address = data.data.Patent.Header.NameAddress;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 获取法律信息
    getLegalInfo() {
      this.$post(this.$Url.patent.legal, {
        ipn: this.pn,
        sf: "QueryLegalStatus",
      })
        .then((data) => {
          let LegalStatusList = data.data.Result.LegalStatusList;
          if (LegalStatusList) {
            if (LegalStatusList.LegalStatus.length > 0) {
              for (let i = 0; i < LegalStatusList.LegalStatus.length; i++) {
                let obj = {
                  PD: LegalStatusList.LegalStatus[i].PD,
                  Type: LegalStatusList.LegalStatus[i].Type,
                  Content: LegalStatusList.LegalStatus[i].Content,
                };
                this.legalData.push(obj);
              }
            } else {
              this.legalData.push(LegalStatusList.LegalStatus);
            }
          }
        })
        .catch((error) => {
          this.legalLoading = "no-data";
          console.log(error);
        });
    },
    // 相关专利
    getRelevantPatent() {
      this.$get(this.$Url.patent.relevant, {
        pn: this.searchPn,
      })
        .then((data) => {
          if (data.data) {
            this.relevantData = data.data;
          } else {
            this.relevantLoading = "no-data";
          }
        })
        .catch((error) => {
          this.relevantLoading = "no-data";
          console.log(error);
        });
    },
    // pdf下载
    downloadPdf() {
      let promise = new Promise((resolve, reject) => {
        this.$post(this.$Url.patent.pdfString, {
          sf: "ShowPatent",
          sl: "chs",
          spn: this.pn,
          sx: "showpatent_cn",
        }).then((data) => {
          let PdfString = data.data.Patent.PdfString;
          resolve(PdfString);
        });
      });
      promise.then((PdfString) => {
        this.$get(this.$Url.patent.openPdf, {
          spn: this.pn, // 内部文档号
          sv: PdfString, // pdf文件编号
          sdisplaypn: this.searchPn,
          sid: this.basicData.isd, // 公开日
        })
          .then((data) => {
            if (data.status === 500) {
              this.$message.error("未找到相关文件");
              return;
            }
            if (data.data && data.data.path) {
              window.open(data.data.path);
              return;
            }
            if (data.data && data.data.message && data.data.message === '没有找到相关PDF文件,请访问EP') {
              window.open(
                `${this.$Url.patent.openPdf}?spn=${this.pn}&sv=${PdfString}&sdisplaypn=${this.searchPn}&sid=${this.basicData.isd}`
              );
              return
            }
            this.openPdf2(PdfString)
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    openPdf2(PdfString) {
      this.$axios({
        method: 'get',
        url: this.$Url.patent.openPdf,
          params: {
          spn: this.pn, // 内部文档号
          sv: PdfString, // pdf文件编号
          sdisplaypn: this.searchPn,
          sid: this.basicData.isd, // 公开日
        },
        responseType: 'blob'
      }).then(res => {
        let blob = new Blob([res.data]);
        let url = window.URL.createObjectURL(blob);
        window.open(url, '_blank')
      }).catch(err => {})
    }
  },
};
</script>

<style lang="scss" scoped>
.el-row {
  text-align: left;
  background: #fff;
  margin-bottom: 20px;
}
.title_ {
  overflow: hidden;
  line-height: 60px;
  padding-left: 10px;
  span {
    display: block;
    float: left;
    font-weight: bold;
    font-size: 16px;
    color: #534aa8;
  }
  .psd-icon {
    width: 30px;
    margin-left: 10px;
    height: 30px;
    margin-top: 15px;
    line-height: 80px;
    float: left;
    cursor: pointer;
  }
}
.patent-title {
  margin-top: 10px;
  margin-bottom: 10px;
  text-indent: 4px;
  font-size: 15px;
  color: $mainColor;
}
.patent-title span {
  display: inline-block;
  vertical-align: middle;
}
.patent-title .psd-icon {
  display: inline-block;
  height: 24px;
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
}
.abstract {
  width: 100%;

  box-sizing: border-box;
  padding: 20px;
}
.abstract i {
  display: block;
  text-align: left;
  padding: 20px 20px 0;
  width: 100%;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: $mainColor;
  background: #f2f6f9;
}
.abstract span {
  display: block;
  background: #f2f6f9;
  width: 100%;
  line-height: 30px;
  padding: 10px 20px 20px;
  font-size: 12px;
  color: #7674a3;
}
.basic-info {
  width: 100%;
  list-style: none;
  padding-left: 0;
  margin: 20px;
  border: 1px solid #ececf5;
}
.basic-info li {
  border: 1px #ececf5 solid;
  color: #838895;
}
.basic-info li span {
  display: table-cell;
  width: 200px;
  max-width: 380px;
  max-height: 296px;
  padding: 14px 8px;
  word-break: break-all;
  vertical-align: middle;
  font-size: 12px;
}
.basic-info li span:nth-child(odd) {
  width: 151px;
  font-weight: 600;
  color: $mainColor;
  background-color: #f9f9ff;
}
.basic-info li span:nth-child(even) {
  width: 380px;
  line-height: 20px;
}
</style>

